<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .list {
          margin-top: 50px;
        }
        .list-item {
          height: 40px;
          width: 700px;
          background-color: #40b0be;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 20px;
          border-radius: 5px;
          color: white;
        }
        .list .moving {
          background: transparent;
          color: transparent;
          border: 1px dashed #ccc;
        }
        .balck {
          background-color: black;
        }

        .list-item.dragging {
            opacity: 0;
            border: 1px dashed #ccc;
        }
      </style>
</head>
<body>
    <div class="list">
        <div draggable="true" class="list-item">
            <div>qqqqqqqqq</div>djdjaksd<div></div>123123<div></div>
        </div>
        <div draggable="true" class="list-item">
            <div>wwwwwwwwwww</div>djdjaksd<div></div>123123<div></div>
        </div>
        <div draggable="true" class="list-item">
            <div>eeeeeeeeeee</div>djdjaksd<div></div>123123<div></div>
        </div>    <div draggable="true" class="list-item">
            <div>rrrrrrrrrrrrr</div>djdjaksd<div></div>123123<div></div>
        </div>
        <div draggable="true" class="list-item">
            <div>aaaaaaaaaaaaaa</div>djdjaksd<div></div>123123<div></div>
        </div>
        <div draggable="true" class="list-item">
            <div>ssssssssss</div>djdjaksd<div></div>123123<div></div>
        </div>
        <div draggable="true" class="list-item">
            <div>ddddddddddd</div>djdjaksd<div></div>123123<div></div>
        </div>
    </div>






    <script>
        const sortableList = document.querySelector('.list');
        const items = document.querySelectorAll('.list-item');

        console.log(items);
        console.log(sortableList);

        items.forEach(item => {
            item.addEventListener('dragstart', () => {
                setTimeout(() => {
                    item.classList.add('moving');
                }, 0);
            });

            item.addEventListener('dragend', () => {
                item.classList.remove('moving');
            });
        })

        const initSortableList = (e) => {
            e.preventDefault();
            const draggingItem = sortableList.querySelector('.moving');
            const siblings = [...sortableList.querySelectorAll('.list-item:not(.moving)')]
            let nextSibling = siblings.find(sibling =>{
                return e.clientY <= sibling.offsetTop + sibling.offsetHeight / 2
            })
            console.log(nextSibling);
            sortableList.insertBefore(draggingItem, nextSibling);
        }
        sortableList.addEventListener('dragover', initSortableList)
        sortableList.addEventListener('dragenter', e => e.preventDefault())

        
        
    </script>
</body>
</html>